import { debounce } from 'lodash-es'
import Styles from './index.module.scss'
import { Form, Picker, TextArea } from 'antd-mobile'

const index = () => {
  const [form] = Form.useForm()

  // 提交
  const onFinish = debounce(async (values: any) => {
    // const settlementTime = dayjs(values.settlementTime).format('YYYY-MM')
    // const param = {
    //   ...values,
    //   departmentDocking: values.departmentDocking.join(','),
    //   industryCategories: values.industryCategories[0],
    //   industryStatus: values.industryStatus.join(','),
    //   isEnterprise: values.isEnterprise[0],
    //   settlingDownAppeal: values?.settlingDownAppeal ?? '',
    // }
    // const { data } = await setFormInfo({ content: JSON.stringify(param) })
    // Toast.show(data.msg)
    // if (!data.code) {
    //   setTimeout(() => {
    //     navigate('/submission-page')
    //   }, 800)
    // }
  })

  return (
    <Form
      form={form}
      onFinish={onFinish}
      className={`${Styles.form}`}
      footer={
        <div className={`d_between_center ${Styles.footer_container} w`}>
          {/* <Button
            onClick={handleStaging}
            color="primary"
            size="large"
            fill="outline"
          >
            暂存
          </Button>
          <Button type="submit" color="primary" size="large">
            提交
          </Button> */}
        </div>
      }
    >
      <Form.Item
        name="contacts"
        label="工作进度"
        rules={[{ required: true, message: '工作进度不能为空' }]}
        className={`${Styles.mb_12} base-content-view`}
      >
        <TextArea autoSize={{ minRows: 3, maxRows: 5 }} placeholder="请输入" />
      </Form.Item>
      <Form.Item
        shouldUpdate={(prevValues, curValues) =>
          prevValues.birthday !== curValues.birthday
        }
        noStyle
      >
        {({ setFieldValue, getFieldValue }) => (
          <Form.Item
            name="industryCategories"
            label="问题类型"
            rules={[
              {
                required: true,
                message: '问题类型不能为空',
              },
            ]}
            className={`${Styles.mb_12} base-content-view`}
            trigger="onConfirm"
          >
            <Picker
              onConfirm={(_, extend) => {
                if (!getFieldValue('departmentDocking')?.length) {
                  setFieldValue('departmentDocking', [extend.items[0]?.label])
                }
              }}
              columns={[]}
              renderLabel={({ value }) => value}
            >
              {(item, actions) => (
                <span
                  onClick={actions.open}
                  className={`${item[0]?.value ? 'color_333' : 'color_999'}`}
                >
                  {item?.[0]?.value ?? '请选择问题类型'}
                </span>
              )}
            </Picker>
          </Form.Item>
        )}
      </Form.Item>
      <Form.Item
        name="businessAddress"
        label="存在问题"
        rules={[{ required: true, message: '存在问题不能为空' }]}
        className={`${Styles.mb_12} base-content-view`}
      >
        <TextArea autoSize={{ minRows: 3, maxRows: 5 }} placeholder="请输入" />
      </Form.Item>
      <Form.Item
        name="mainBusiness"
        label="下一步工作计划"
        rules={[{ required: true, message: '下一步工作计划不能为空' }]}
        className={`${Styles.mb_12} base-content-view`}
      >
        <TextArea autoSize={{ minRows: 3, maxRows: 5 }} placeholder="请输入" />
      </Form.Item>
    </Form>
  )
}

export default index
